import React from 'react';
import Navbar from '../component/Navbar';
import { InputItem } from 'antd-mobile';
import './style/chongzhi.css';

const czje = [
    { title: '100', key: 0 },
    { title: '2000', key: 1 },
    { title: '5000', key: 2 },
    { title: '10000', key: 3 },
    { title: '20000', key: 4 },
    { title: '40000', key: 5 },
]

const zffs = [
    { img: require('./img/chongzhi/zf1.png'), title: '支付宝', key: 0 },
    { img: require('./img/chongzhi/zf2.png'), title: '微信支付', key: 1 },
    { img: require('./img/chongzhi/zf3.png'), title: '银联支付', key: 2 },
]


class Chongzhi extends React.Component {

    state = {
        czjeSelect: 0,
        czfs: -1,
        money: 100
    }

    goBack = () => {
        this.props.history.goBack();
    }
    jumpLogin() {
        this.props.history.push({ pathname: '/yinlianzhuanzhang' })
    }
    change(e) {
        console.log(e)
        this.setState({
            money: e
        })
    }
    render() {
        const { money } = this.state
        return (
            <div className='chongzhi'>
                <Navbar onClick={this.goBack} title='充值'></Navbar>
                <div className='scroll'>
                    <div className='header'>
                        <span>充值金额</span>
                        <div className='right'>
                            <InputItem
                                placeholder="输入任意金额"
                                extra="元"
                                type='number'
                                onChange={(e) => this.change(e)}
                                value={money}
                                labelNumber={0}
                                autoAdjustHeight={true}
                            > </InputItem>
                        </div>
                    </div>
                    <div className='czje'>
                        {
                            czje && czje.map((v, k) => {
                                return <span style={{
                                    color: `${this.state.czjeSelect === v.key ? '#F98743' : '#666666'}`,
                                    backgroundColor: `${this.state.czjeSelect === v.key ? 'rgba(249,135,67,0.15)' : 'rgba(243,244,246,1)'}`,
                                    border: `${this.state.czjeSelect === v.key ? '1px solid rgba(249,135,67,1)' : 'none'}`,
                                }}
                                    onClick={() => {
                                        this.setState({
                                            czjeSelect: v.key,
                                            money: v.title
                                        })
                                    }}
                                    key={v + k}>{v.title}元</span>
                            })
                        }
                    </div>
                    <span className='zffs'> 支付方式</span>
                    <div className='zffs-main'>
                        {
                            zffs && zffs.map((v, k) => {
                                return (
                                    <div key={v + k}
                                        onClick={() => {
                                            this.setState({
                                                showDetaile: !this.setState.showDetaile
                                            })
                                        }}
                                    >
                                        <div className='item'>
                                            <div className='left'>
                                                <img src={v.img} alt=''></img>
                                                <span>{v.title}</span>
                                            </div>
                                            <img className='check' alt='' src=
                                                {`${this.state.czfs === v.key ?
                                                    require('./img/celue/xuanze.png') :
                                                    require('./img/celue/weixuanze.png')}`}
                                                onClick={() => {
                                                    this.setState({
                                                        czfs: v.key
                                                    })
                                                }}
                                            >
                                            </img>
                                        </div>
                                        <div className='hidden' style={{
                                            display: `${this.state.czfs === v.key ? 'flex' : 'none'}`
                                        }}>
                                            <span>1、单笔最高5000元，单日限制3笔</span>
                                            <span>2、转账前请先确认收款账号</span>
                                            <span>3、转账请加个零头如1200.01元</span>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className='submit' onClick={() => this.jumpLogin()}>
                    <span>确认充值</span>
                </div>
            </div>
        )
    }
}

export default Chongzhi;